<footer class="footer">
  <!-- This should be `0 items left` by default -->
  <span class="todo-count"><strong>{{ uncompletedCount }}</strong> {{ uncompletedCount === 1 ? 'item' : 'items' }} left</span>
  <!-- Remove this if you don't implement routing -->
  <ul class="filters">
    <li>
      <a routerLink="/" routerLinkActive="selected" [routerLinkActiveOptions]="{ exact: true }">All</a>
    </li>
    <li>
      <a routerLink="/active" routerLinkActive="selected">Active</a>
    </li>
    <li>
      <a routerLink="/completed" routerLinkActive="selected">Completed</a>
    </li>
  </ul>
  <!-- Hidden if no completed items are left ↓ -->
  <button *ngIf="completedCount > 0" class="clear-completed" (click)="onClearCompletedClicked()">Clear completed</button>
</footer>
